<template>
  <Drawer v-model:open="open" 
      title="查看详情" 
      :footer="null" 
      width="100%" 
      @open="openDrawer"
      @close="closeDrawer" 
      destroyOnClose >
    <Row :gutter="24">
      <!-- 左侧树形菜单 -->
      <Col :span="6">
        <Card>
          <Tree
            v-if="treeData.length > 0"
            :tree-data="treeData"
            :default-expand-all="true"
            :show-line="true"
            :field-names="{
              title: 'label',
              key: 'objTypeId',
              children: 'children'
            }"
            :selectable="false"
          >
            <template #title="{ label, total }">
              <span>{{ label }} <span v-if="total !== undefined" style="color:#1890ff;">({{ total }})</span></span>
            </template>
          </Tree>
        </Card>
      </Col>
      <!-- 右侧表格 -->
      <Col :span="18">
        <Table
          :columns="columns"
          :data-source="tableData"
          :pagination="pagination"
          row-key="id"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a @click="viewDetail(record)">查看详情</a>
            </template>
          </template>
        </Table>
      </Col>
    </Row>
    <SQLdetails ref="SQLdetailsRef" :selectObj="selectObj"/>
  </Drawer>
</template>

<script setup>
import { Drawer,Row,Col,Table,Tree,Card, } from 'ant-design-vue'
import { ref,defineExpose,defineProps,reactive } from 'vue'
import * as http from '@/api/flow/createTask';
import store from "@/store";
import SQLdetails from './SQLdetails.vue'
const props = defineProps({
  baseInfo: {
    type: Object,
    default: () => ({})
  }
})
const open = ref(false)
const SQLdetailsRef = ref(null)
// 对象采集详情-用户对象分布（详情）
const objectOwnerView = async () => {

let params = {
  flowId: store.state.taskInfo.flowId,
  dbtype:props.baseInfo.dbType,
  limit:pagination.pageSize,
  offset:pagination.current,
}
let res = await http.objectOwnerView(params)
console.log(res, "res");
try{
  if(res.code === '000000'){   
    tableData.value = res.data.list
    pagination.total = res.data.total
    treeData.value = res.data.menu
  }
}catch(error){
  console.log(error, "error");
}
}

// 左侧树形菜单数据
const treeData = ref([])
const selectObj = ref({})
// 表格列定义
const columns = [
  { title: 'schema', dataIndex: 'owner', key: 'owner' },
  { title: '对象名', dataIndex: 'objectName', key: 'objectName' },
  { title: '对象类型', dataIndex: 'objectType', key: 'objectType' },
  { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } }
]

// 表格数据
const tableData = ref([])



// 分页配置
const pagination = reactive({
  pageSize: 10,
  total: 65,
  current: 1,
  showTotal: total => `共 ${total} 条`,
  onChange: (page, pageSize) => {
    pagination.current = page
    pagination.pageSize = pageSize
    objectOwnerView()
  }
})

// 操作方法
function viewDetail(record) {
  selectObj.value = record
  SQLdetailsRef.value.openDrawer()
}

const openDrawer = () => {
  objectOwnerView()
  open.value = true
}

const closeDrawer = () => {
  open.value = false
}
defineExpose({
  openDrawer,
  closeDrawer,
})
</script>

<style scoped>
.table-details-wrapper {
  background: #fff;
  padding: 24px;
}
</style>